<template>
	<!-- 科室 -->
	<view style="display: flex;">
		<view>
			<!-- 父级科室列表 -->
			<scroll-view scroll-y="true" class="scroll_left" :scroll-top="scrollTop">
				<view :class="ind == index ? 'active' : ''" v-for="(item,index) in DataList"
					@click="getSonDeparmentList(item,index)">{{item.name}}</view>
			</scroll-view>
		</view>

		<view v-if="SonList.length == 0" class="empty">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<!-- 子级科室列表 -->
		<view v-else>
			<scroll-view scroll-y="true" class="scroll_right" :scroll-top="scrollTop">
				<view :class="ind2 == index ? 'activeson' : ''" v-for="(item,index) in SonList"
					@click="getSonDeparmen(index)">{{item.name}}</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				// 传递过来的医院id
				hospital_id: '',
				//请求之后的父级科室列表
				DataList: [],
				ind: 0,
				ind2: 0,
				// 子列表
				SonList: [],
				service: [],
			}
		},
		onLoad(options) {
			if (options.hospital_id) {
				this.hospital_id = options.hospital_id
			}
		},
		onShow() {
			// 获取父级科室
			this.getFatherDeparmentList()
			this.getSonDeparmentList()
		},
		methods: {
			// 获取科室父级列表
			getFatherDeparmentList(item, index) {
				this.post('/api/Zrecduzp/zhidinguyiyuandefukeshihuoqu', {
					hospital_id: this.hospital_id
				}).then((res) => {
					this.DataList = res.data
				})
			},
			// 获取子级科室列表
			getSonDeparmentList(item, index) {
				this.ind = index
				this.post('/api/Zrecduzp/zhidingyiyuandezikeshihuoqu', {
					hospital_id: this.hospital_id,
					department_id: item ? item.id : 0
				}).then((res) => {
					this.SonList = res.data
					// 初始化子级,默认选中第一项
					this.ind2 = 0;

				})
			},
			getSonDeparmen(index) {
				this.ind2 = index
				uni.setStorageSync('department', this.SonList[index])
					uni.navigateBack({
						delta:1
					})

			}
		}
	}
</script>

<style lang="scss">
	.scroll_left {
		height: 100vh;
		width: 250rpx;
		text-align: center;
		background-color: #F9F9F9;
		display: inline-block;

		view {
			padding: 25rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.empty {
		margin-left: 100rpx;
		margin-top: 500rpx;

	}

	.scroll_right {
		height: 100vh;
		width: 500rpx;
		text-align: left;
		display: inline-block;

		view {
			padding: 25rpx;
			font-size: 30rpx;
		}
	}

	page {
		background-color: #FFFFFF;
	}

	.active {
		color: #6E69F8;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.active::after {
		content: " ";
		background-color: blue;
		width: 5rpx;
		height: 50rpx;
		display: block;
		float: left;


	}

	.activeson {
		color: #6E69F8;
		padding: 20rpx;
		background-color: #FFFFFF;
		font-weight: bold;
	}
</style>
